<template>
  <div class="card mb-3" style="font-size: 14px">
    <h5 class="card-header border-0"><span class="iconfont icon-essential-information"></span>个人信息</h5>
    <div class="card-body">
      <p class="card-text">姓名：{{ userInfo.name }}</p>
      <p class="card-text">性别：{{ userInfo.sex|sex }}</p>
      <p class="card-text">身份证号：{{ userInfo.IDCard }}</p>
      <p class="card-text">学校：{{ userInfo.schoolName|school }}</p>
      <p class="card-text">学号：{{ userInfo.Sno }}</p>
      <p class="card-text">学院：{{ userInfo.collegeName|college }}</p>
      <p class="card-text">专业：{{ userInfo.majorName|major }}</p>
      <p class="card-text">联系电话：{{ userInfo.tel }}</p>
      <p class="card-text text-center">
        <button type="button" data-bs-toggle="modal"
                data-bs-target="#staticBackdrop" :disabled="userInfo.status===1"
                :class="'btn text-nowrap '+userInfo.status===0?'btn-outline-danger':'btn-outline-info'">
          {{ userInfo.status === 0 ? '未认证，立即认证' : '认证成功' }}
          <template v-if="userInfo.status===1">
            <span data-bs-toggle="modal"
                  data-bs-target="#staticBackdrop" class="updateInfo">修改信息</span>
          </template>
        </button>
      </p>
    </div>
    <!--   模态框 -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">个人信息认证</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form ref="userForm" class="needs-validation was-validated" novalidate>
              <div class="mb-3">
                <label for="userName" class="form-label">姓名</label>
                <input placeholder="请输入姓名" required v-model="confirmUser.name" type="text" class="form-control"
                       id="userName">
              </div>
              <div class="mb-3">
                <div class="form-check form-check-inline">
                  <input v-model="confirmUser.sex" class="form-check-input" type="radio" name="sex" id="male"
                         value="male">
                  <label class="form-check-label" for="male">男</label>
                </div>
                <div class="form-check form-check-inline">
                  <input required v-model="confirmUser.sex" class="form-check-input" type="radio" name="sex" id="female"
                         value="female">
                  <label class="form-check-label" for="female">女</label>
                </div>
              </div>
              <div class="mb-3">
                <label for="IDCard" class="form-label">身份证号</label>
                <input placeholder="请输入身份证号" required type="text" v-model="confirmUser.IDCard" class="form-control"
                       id="IDCard">
              </div>
              <div class="mb-3">
                <label for="schoolName" class="form-label">学校</label>
                <select v-model="confirmUser.schoolName" class="form-select" aria-label="Default select example">
                  <template v-for="el in school">
                    <option :value="el.key" v-bind:key="el.key">{{ el.value }}</option>
                  </template>
                </select>
              </div>
              <div class="mb-3">
                <label for="Sno" class="form-label">学号</label>
                <input placeholder="请输入学号" required type="text" v-model="confirmUser.Sno" class="form-control" id="Sno">
              </div>
              <div class="mb-3">
                <label for="collegeName" class="form-label">学院</label>
                <select v-model="confirmUser.collegeName" class="form-select" aria-label="Default select example">
                  <template v-for="el in college">
                    <option :value="el.key" v-bind:key="el.key">{{ el.value }}</option>
                  </template>
                </select>
              </div>
              <div class="mb-3">
                <label for="majorName" class="form-label">专业</label>
                <select v-model="confirmUser.majorName" class="form-select" aria-label="Default select example">
                  <template v-for="el in major">
                    <option :value="el.key" v-bind:key="el.key">{{ el.value }}</option>
                  </template>
                </select>
              </div>
              <div class="mb-3">
                <label for="tel" class="form-label">联系电话</label>
                <input placeholder="请输入联系电话" required type="text" v-model="confirmUser.tel" class="form-control"
                       id="tel">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" @click="submit">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import user from "../../../api/user";
import sex from "../../../filter/sex";
import init from "../../../api/init";
import school from "../../../filter/school";
import college from "../../../filter/college";
import major from "../../../filter/major";

export default {
  name: "myInfo",
  data() {
    return {
      userInfo: {...this.$store.getters["userStore/userInfo"]},
      confirmUser: {...this.$store.getters["userStore/userInfo"]},
      school: init.school,
      college: init.college,
      major: init.major
    }
  },
  mounted() {

  },
  filters: {
    sex,
    school, college,
    major
  },
  methods: {
    submit() {
      console.log(this.confirmUser)
      if (this.$refs.userForm.checkValidity()) {
        user.UserInfoConfirm(this.confirmUser).then(r => {
          if (r.data.status === '200') {
            this.userInfo = r.data.data.user
            this.$message({
              message: '认证成功',
              type: 'success'
            });
            this.$nextTick()
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.updateInfo {
  cursor: pointer;
  text-decoration: underline;
  color: #40aaff;
}
</style>